<template>
    <div class="comment">
        <div class="w880">
            <div class="comment-head">
                <h3>评论<span>共{{total}}条评论</span></h3>
            </div>
            <div class="comment-box">
                <div class="textarea-main">
                    <textarea class="comment-textarea" wrap="physical" v-model="msg" placeholder="期待你的神评论……" ></textarea>
                </div>
                <div class="textarea-footer">
                    <el-button type="primary" size="mini">评论</el-button>
                    <span class="comment_limit">{{msg.length}} / {{msgMax}}</span>
                </div>
            </div>
            <div class="comment-area">
                <ul class="comment-area-main">
                    <li class="comment-item" v-for="(item,index) in commentList" :key="item.commentId+index">
                       <div class="comment-user-logo">
                           <el-image :src="item.user.avatarUrl"></el-image>
                       </div>
                       <div class="comment-user-info">
                           <div class="username pre">{{item.user.nickname}}</div>
                           <p class="user-comment">{{item.content}}</p>
                           <div class="publictime pre">
                               <div class="time-left">{{item.timeStr}}</div>
                               <!-- {{$util.getSongDate(item.time)}} -->
                               <div class="time-right">
                                   <span><i class="el-icon-thumb"></i> ({{item.likedCount}}) </span>
                                   <span><i class="el-icon-chat-dot-round"></i></span>
                               </div>
                           </div>
                       </div>
                       <!-- <div class="comment-hot">定位</div> -->
                    </li>
                </ul>
            </div>
                <pagination :pageSize="comment_params.limit" :total="total" @changePage="changePage"></pagination>
        </div>
    </div>
</template>
<script>
import Pagination from './Pagination.vue'
export default {
    components:{
        Pagination
    },
    props: {
        // 0: 歌曲 1: mv 2: 歌单 3: 专辑  4: 电台 5: 视频 6: 动态
        type: {  
            type: Number,
            required: true
        },
        comment_params:{  //用于接口的参数信息
            type:Object,
            required: true
        }
    },
   data() {
      return {
          msg:'',
          msgMax:140,
          commentList:[],
          hotCommentList:[],
          total:0
      }
   },
 created(){
    //  console.log(this.comment_params.id)
       this.getComment(this.comment_params);
   },
   watch:{
       comment_params:{
           deep:true,
           handler(newval){
               this.getComment(newval);
           }
       }
   },
   methods:{
       getComment(params){  //根据不同的type显示不同的评论
           switch(this.type){
               case 0:
                   this.getCommentSong(params); //歌曲评论
                break;
                case 1:
                    this.getCommentMv(params);  //mv评论
                break;
                case 3:
                    this.getCommentAlbum(params); //专辑评论
                break;
                 case 5:
                    this.getCommentVideo(params); //视频评论
                break;
           }
       },
       async getCommentSong(params){
           const res = await this.$api.getCommentSong(params);
           this.handleCommentInfo(res)
        //    console.log(res)
       },
       async getCommentAlbum(params){
           const res = await this.$api.getCommentAlbum(params);
           this.handleCommentInfo(res)
        //    console.log(res);


       },
       async getCommentVideo(params){
           const res = await this.$api.getCommentVideo(params);
        //    console.log(res)
       },
       async getCommentMv(params){
           const res = await this.$api.getCommentMv(params);
           this.handleCommentInfo(res);
        //    console.log(res)
       },
       handleCommentInfo(res){
           if (res.code !== 200) {
                return this.$msg.error('数据请求失败')
            }
            this.hotCommentList=res.hotComments||[];//判断有没有热门评论
            if(this.hotCommentList.length){
                this.hotCommentList.map(item=>{
                    item.hot=true;
                    return item
                })
            }
            this.total=res.total;
            this.commentList=[...this.hotCommentList,...res.comments];//评论数组由热门评论与普通评论组成
       },
       changePage(num){
        //    console.log(num)
           this.comment_params.offset=(num-1)*this.comment_params.limit;
           this.getComment(this.comment_params);
       }
   },
}
</script>
<style lang="less" scoped>
.comment{
    padding-top: 30px;
    .w880{
        width: 880px;
        min-height: 400px;
        .comment-head{
            width: 100%;
            height: 60px;
            h3{
                font-size: 24px;
                font-weight: 500;
                color: #333;

                span{
                    color: #999;
                    margin-left: 20px;
                    font-size: 12px;
                }
            }
        }
        .comment-box{
            width: 100%;
            height: 200px;
            // border: 1px solid #ccc;
            .textarea-main{
                width: 878px;
                height: 110px;
                overflow: hidden;
                border: 1px solid #e9e9e9;
                border-radius: 4px;
                background-color: #fff;
                .comment-textarea{
                    width: 300px;
                    height: 110%;
                    border: none;
                    outline: none;
                    padding: 15px 10px;
                    color: #333;
                    font-family: inherit;
                }
            }
            .textarea-footer{
                display: flex;
                justify-content: space-between;
                padding: 20px 5px;

                span{
                    color: #666;
                }
            }
        }
        .comment-area{
            width: 880px;
        .comment-area-main{
            .comment-item{
                width: 100%;
                min-height: 109px;
                padding: 15px 0;
                border-bottom: 1px solid #f2f2f2;
                position: relative;
                color: #333;
                display: flex;
                .comment-user-logo{
                    width: 40px;
                    height: 100%;
                    padding-top: 2px;
                    .el-image{
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                    }
                }
                .comment-user-info{
                    flex: 1;
                    padding-left: 18px;
                    height: 100%;
                    // border: 1px solid yellow;
                    .pre{
                        color: #999;
                    }
                    .user-comment{
                        padding: 10px 0;
                    }
                    .publictime{
                        height: 28px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                    .time-right{
                        i{
                            cursor: pointer;
                        }
                        .el-icon-chat-dot-round{
                            margin-left: 10px;
                        }
                    }
                }
            }
        }
        }
    }

}
</style>
